<template>
	<view class="chart">
		<view class="circle">
			<circle 
				:currentVal="currentVal" 
				:maxVal="maxVal" 
				:status="2"
				@change="change"
			/>
		</view>
		<view class="combat" v-if="false">
			<combat 
				class="item"
				:maxVal="maxVal"
				:currentVal="currentVal" 
				:sourceData="sourceData"
			/>
		</view>
		<view class="chartBar">
			<m-chart-bar :barData="oneBarData" />
		</view>
		<view class="chartBar">
			<m-chart-bar :barData="twoBarData" />
		</view>
		<view class="chartBar">
			<m-chart-bar :barData="threeBarData" />
		</view>
	</view>
</template>

<script>
import circle from './components/circle.vue';
import combat from './components/combat.vue';
import mChartBar from './components/mChartBar.vue'
export default {
	components: { circle, combat, mChartBar },
	data() {
		return {
			maxVal: 5049,
			currentVal: 2800,
			sourceData: [
				{ title: '基础', value: 7500, maxVal: 12100 },
				{ title: '声望', value: 5000, maxVal: 12100 },
				{ title: '活跃', value: 6000, maxVal: 12100 },
				{ title: '眼力', value: 4660, maxVal: 12100 },
			],
			oneBarData: [
				{ title: "2017年报", unit: "亿", value: "-2.04", value_yoy: "40.13" },
				{ title: "2018年报", unit: "亿", value: "-1.23", value_yoy: "39.84" },
				{ title: "2019年报", unit: "亿", value: "-1.50", value_yoy: "-22.13" },
				{ title: "2020年报", unit: "亿", value: "-0.92", value_yoy: "38.35" },
				{ title: "2021年报", unit: "亿", value: "0.43", value_yoy: "146.44" }
			],
			twoBarData: [
				{ title: "2017年报", unit: "亿", value: "9.38", value_yoy: "12.43" },
				{ title: "2018年报", unit: "亿", value: "10.36", value_yoy: "10.38" },
				{ title: "2019年报", unit: "亿", value: "12.11", value_yoy: "16.89" },
				{ title: "2020年报", unit: "亿", value: "11.40", value_yoy: "-5.82" },
				{ title: "2021年报", unit: "亿", value: "13.74", value_yoy: "20.50" }
			],
			threeBarData: [
				{ title: "2017年报", unit: "亿", value: "-9.38", value_yoy: "12.43" },
				{ title: "2018年报", unit: "亿", value: "-5.36", value_yoy: "10.38" },
				{ title: "2019年报", unit: "亿", value: "-8.11", value_yoy: "16.89" },
				{ title: "2020年报", unit: "亿", value: "-2.40", value_yoy: "-5.82" },
				{ title: "2021年报", unit: "亿", value: "-1.74", value_yoy: "20.50" }
			]
		}
	},
	methods: {
		change() {
			this.currentVal = 2200;
		}
	}
}
</script>

<style lang="scss" scoped>
.chart {
	min-height: 100vh;
	width: 100%;
	// background: rgb(254, 250, 244);
	background: #f4f5f6;
	.circle {
		display: flex;
		justify-content: center;
		padding-top: 20px;
	}
	.combat {
		display: flex;
		justify-content: center;
		margin-top: 20px;
		width: 520rpx;
		height: 484rpx;
		margin: 0 auto;
		.item {
			width: 100%;
		}
	}
	.chartBar {
		width: 686rpx;
		height: 266rpx;
		margin: 100rpx auto;
		border: 2rpx solid #f4f5f6;
		background: white;
		border-radius: 8rpx;
	}
}
</style>
